<template>
  <t-dialog
    :header="header"
    :visible.sync="visible"
    :onClose="closeDialog"
    :closeOnOverlayClick="false"
    @confirm="onSubmit"
    :confirmBtn="{
        content: loading?'提交中...':'确认',
        theme: 'primary',
        loading: loading,
      }"
    width="90%"
    top="5%"
  >
    <div style="height: 65vh">
      <t-form ref="form" :data="formData" labelWidth="100px" :rules="rules">
        <t-form-item label="标题" name="title">
          <t-input clearable v-model="formData.title"></t-input>
        </t-form-item>
        <t-form-item label="单位名称" name="departmentId">
          <t-tree-select clearable filterable :treeProps="{keys: {value: 'id'}}" v-model="formData.departmentId"
                         :data="deptOptions" placeholder="选择单位"></t-tree-select>
        </t-form-item>
        <t-form-item label="值班时间" name="startDate">
          <t-date-range-picker enable-time-picker allow-input clearable v-model="formData.dateRange"/>
        </t-form-item>
        <t-form-item label="值班地点" name="dutyTelephone">
          <t-input clearable v-model="formData.dutyTelephone"></t-input>
        </t-form-item>
        <t-form-item label="值班电话" name="dutyTelephone">
          <t-input clearable v-model="formData.dutyTelephone"></t-input>
        </t-form-item>
        <t-form-item label="值班人员" labelAlign="top" name="note">
          <t-table rowKey="id"
                   :data="formData.members"
                   :columns="columns"
                   bordered
                   hover>
            <template #watchDate>
              <t-date-picker  clearable />
            </template>
            <template #[`Leader1.name`]="{row}">
              <t-input></t-input>
            </template>
            <template #[`Leader1.duty`]="{row}">
              <t-input></t-input>
            </template>
            <template #[`Leader1.phone`]="{row}">
              <t-input></t-input>
            </template>
            <template #[`Leader2.name`]="{row}">
              <t-input></t-input>
            </template>
            <template #[`Leader2.duty`]="{row}">
              <t-input></t-input>
            </template>
            <template #[`Leader2.phone`]="{row}">
              <t-input></t-input>
            </template>
            <template #[`Leader3.name`]="{row}">
              <t-input></t-input>
            </template>
            <template #[`Leader3.duty`]="{row}">
              <t-input></t-input>
            </template>
            <template #[`Leader3.phone`]="{row}">
              <t-input></t-input>
            </template>
          </t-table>
        </t-form-item>
        <div style="margin-top: 10px" class="btn-group-inline">
          <t-button @click="addData()">新增</t-button>
          <t-button @click="upData()">上移</t-button>
          <t-button @click="downData()">下移</t-button>
          <t-button @click="delData()">删除</t-button>
        </div>
        <t-form-item labelAlign="top"  label="值班要求" name="note">
          <t-textarea v-model="formData.note" :autosize="{minRows: 6}"/>
        </t-form-item>
      </t-form>
    </div>
    <template #footer>
      <t-button :loading="submitLoading" theme="primary" @click="onSubmit(0)">暂存</t-button>
      <t-button :loading="submitLoading"   theme="primary" @click="onSubmit(1)">提交</t-button>
      <t-button theme="default" @click="closeDialog">取消</t-button>
    </template>
  </t-dialog>
</template>

<script>
export default {
  name: "add-edit-watch",
  props: ['header', 'objId', 'parentId'],
  data() {
    return {
      visible: true,
      loading: false,
      submitLoading: false,
      deptOptions: [],
      formData: {
        departmentId: null,
        title: '',
        dateRange: [],
        startDate: '',
        endDate: '',
        note: '',
        dutyTelephone: '',
        members: []
      },
      data: [],
      columns: [
        {
          colKey: 'row-select',
          type: 'single',
          title: "选择",
          width: 64
        },
        {
          colKey: "watchDate",
          title: "日期",
          align: "center",
          width: 220
        },
        {
          colKey: "Leader1",
          title: "带班领导",
          align: "center",
          children: [
            {
              colKey: 'Leader1.name',
              title: '姓名',
              align: "center",
            },
            {
              colKey: 'Leader1.duty',
              title: '职务',
              align: "center",
            },
            {
              colKey: 'Leader1.phone',
              title: '联系方式',
              align: "center",
            },
          ],
        },
        {
          colKey: "Leader2",
          title: "值班中层",
          align: "center",
          children: [
            {
              colKey: 'Leader2.name',
              title: '姓名',
              align: "center",
            },
            {
              colKey: 'Leader2.duty',
              title: '职务',
              align: "center",
            },
            {
              colKey: 'Leader2.phone',
              title: '联系方式',
              align: "center",
            },
          ],
        },
        {
          colKey: "Leader3",
          title: "值班员",
          align: "center",
          children: [
            {
              colKey: 'Leader3.name',
              title: '姓名',
              align: "center",
            },
            {
              colKey: 'Leader3.duty',
              title: '职务',
              align: "center",
            },
            {
              colKey: 'Leader3.phone',
              title: '联系方式',
              align: "center",
            },
          ],
        },
      ],
      rules: {}
    }
  },
  watch: {
    objId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getObj();
        }
      }
    },
  },
  created() {
    if (!this.objId) {
      Promise.all([this.getDeptTreeSelect()]);
    }
  },
  methods: {
    async getObj() {
      await Promise.all([this.getDeptTreeSelect()]);
      this.$api.wlaq.emergency.watchGet(this.objId).then(response => {
        Object.assign(this.formData, response.data)
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    closeDialog() {
      this.$emit("update:visible", false);
    },
    onSubmit() {
      this.$refs.form.validate().then((validateResult) => {
        if (validateResult === true) {
          this.loading = true;
          if (this.objId) {
            this.$api.wlaq.emergency.watchUpdate(this.formData).then(() => {
              this.$message.success("修改成功");
              this.$emit("reload");
              this.$emit("update:visible", false);
              this.loading = false;
            }).catch((e) => {
              this.loading = false;
              this.$message.error(e.toString());
            });
          } else {
            this.$api.wlaq.emergency.watchAdd(this.formData).then((response) => {
              this.$message.success("新增成功");
              this.$emit("reload");
              this.$emit("update:visible", false);
              this.loading = false;
            }).catch((e) => {
              this.loading = false;
              this.$message.error(e.toString());
            });
          }
        } else {
          const firstError = Object.values(validateResult)[0]?.[0]?.message;
          this.$message.error(firstError);
        }
      });
    },
    getDeptTreeSelect(id) {
      return this.$api.system.dept.treeSelectAllIn().then(response => {
        this.deptOptions = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    addData(){
      const newId = Number(new Date().getTime()) + Number(Math.random() * 10)
      this.formData.members.push({
        id: newId,
        deptName: '',
        managerId: null,
        note: '',
      })
    },
    upData(){

    },
    downData(){

    },
    delData(){

    }
  }
}
</script>

<style scoped>

</style>
